<template>
    <div class="video-full-height">
        <div class="video-list video-full-height">
            <div class="video-hd ">
                <!-- <div>{{ form.ResName }}</div> -->
                <div>{{ title }}：{{ form.CurrentProgress }}%</div>
                <div>
                    <span v-if="form.CurrentProgress != 100">还剩</span>
                    <van-count-down v-if="form.CurrentProgress != 100" :auto-start="false" ref="countDown" :time="time" style="color: #ffff; margin: 0 2px" format="HH 时 mm 分 ss 秒" @change="timeChange" />
                    <span v-if="form.CurrentProgress != 100">完成学习</span>
                </div>
            </div>
            <template v-if="isDownload">
                <video id="video1" controls :src="url" class="video"></video>
            </template>
            <template v-else>
                <video id="video1" autoplay controls controlslist="nodownload" :src="url" class="video"></video>
            </template>
            <!-- <video id="video1"   v-if="mp4" class="video" controls :src="url"  ></video> -->
        </div>
        <!-- <div class="fixed">
			<div class="transform-rotate">
				<video
					v-if="mp4"
					id="video"
					@click="play()"
					class="video"
					controls
					:src="url"
				></video>
			</div>
		</div> -->
    </div>
</template>

<script>
import { CountDown } from "vant";
// /**
//  * 视频全屏播放旋转目前的逻辑
//  * 视频全屏，即锁定屏幕为横屏。
//  * 视频恢复，则解除屏幕方向的锁定。
//  * 具体的切换，根据自己的实际业务做相应的操作。
//  */
// // Android平台的视频全屏旋转
// var fullScreenOfAndroid = function () {
// 	if (true) {
// 		var videoElem = document.getElementById('video')
// 		this.videoElem.style.height = window.innerWidth + 'px'
// 		this.videoElem.width = window.innerHeight + 'px'
// 		// 最新5+API的支持
// 		var self = plus.webview.currentWebview()
// 		self.setStyle({
// 			videoFullscreen: 'landscape',
// 		})
// 	} else {
// 		// 如果暂未更新sdk，可以先使用差量升级等方式，做出y兼容处理；
// 		// 旧版本下的兼容处理
// 		document.addEventListener('webkitfullscreenchange', function () {
// 			var el = document.webkitFullscreenElement //获取全屏元素
// 			if (el) {
// 				plus.screen.lockOrientation('landscape') //锁死屏幕方向为横屏
// 			} else {
// 				plus.screen.unlockOrientation() //解除屏幕方向的锁定
// 			}
// 		})
// 	}
// }
// // iOS平台的视频全屏旋转
// var fullScreenOfIos = function (videoElem) {
// 	var videoElem = document.getElementById('video')
// 	this.videoElem.style.height = window.innerWidth + 'px'
// 	this.videoElem.width = window.innerHeight + 'px'
// 	// 监听的事件与Android平台有很大区别
// 	videoElem.addEventListener('webkitbeginfullscreen', function () {
// 		plus.screen.lockOrientation('landscape') //锁死屏幕方向为横屏
// 	})
// 	videoElem.addEventListener('webkitendfullscreen', function () {
// 		plus.screen.unlockOrientation() //解除屏幕方向的锁定
// 	})
// }
// // 涉及到5+API的内容，均在plusready事件后调用；
// document.addEventListener('plusready', function () {
// 	var osName = plus.os.name
// 	if (osName === 'Android') {
// 		fullScreenOfAndroid()
// 	} else if (osName === 'iOS') {
// 		var videoElem = document.getElementById('video')

// 		fullScreenOfIos(videoElem)
// 	}
// })
export default {
    components: { CountDown },
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            id: "",
            sid: "",
            stype: "",
            form: {},
            url: "",
            mp4: false,
            pdf: false,
            ppt: false,
            time: 0,
            title: "",
            isDownload: false,
        };
    },
    created() {

        var paramID = this.$route.query.id;
        this.id = paramID;

        var paramSID = this.$route.query.sid;
        this.sid = paramSID;

        var paramSType = this.$route.query.stype;
        this.stype = paramSType;

        this.getDetail();
    },
    mounted: function () {
        let that = this;
        var myVid = document.getElementById("video1");
        myVid.onplay = function () {
            console.log("play");
            that.getStart();
        };
        myVid.onpause = function () {
            console.log("onpause");
            that.getPause();
        };
    },
    methods: {
        getStart() {
            if (this.form.CurrentProgress != 100) {
                this.$refs.countDown.start();
            }
        },

        getPause() {
            this.$refs.countDown.pause();
        },
        timeChange(timeData) {
            let newTime =
                (timeData.days * 60 + timeData.minutes * 60 + timeData.seconds) % 15;
            if (newTime == 0) {
                let _this = this;
                _this.$axios
                    .post("/TrainStudyRecord/Study", {
                        id: _this.form.ID,
                        sid: _this.sid,
                        stype: _this.stype,
                        guid: _this.form.CurrentGuid,
                        silence: true,
                    })
                    .then((res) => {
                        _this.form.CurrentProgress = res.data.CurrentProgress;
                        if (res.data.CurrentProgress == 100) {
                            _this.title = "当前进度";
                        } else {
                            _this.title = "当前学习进度";
                        }
                    })
                    .catch((err) => {
                        console.log("err", err);
                    })
            }
        },
        getDetail() {
            let params = { id: this.id, sid: this.sid, stype: this.stype };
            let _this = this;
            _this.$axios
                .get("/TrainRes/GetStudyInfo", { params: params })
                .then((res) => {
                    if (res.data.AttMiddlePath.indexOf("http") == -1) {
                        _this.url = _this.baseUrl + res.data.AttMiddlePath;
                    } else {
                        _this.url = res.data.AttMiddlePath;
                    }
                    if (_this.url.indexOf(".mp4") != -1) {
                        _this.mp4 = true;
                    }

                    _this.form = res.data;
                    _this.isDownload = res.data.AllowDownload;
                    if (res.data.CurrentProgress == 100) {
                        _this.title = "当前进度";
                    } else {
                        _this.title = "当前学习进度";
                        _this.time = res.data.LeftStudyHours * 60 * 1000;
                        _this.$nextTick(() => {
                            _this.$refs.countDown.start()
                        })
                    }
                })
        },
    },
};
</script>

<style lang="less" scoped>
.video-hd {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    font-size: 14px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}
.video-hd > div {
    display: flex;
    align-items: center;
}
.video {
    width: 100%;
    height: calc(100vh - 85px);
}

.video-full-height {
    height: calc(100vh - 85px);
}

// .fixed {
// 	position: fixed;
// 	top: 0;
// 	left: 0;
// 	bottom: 0;
// 	right: 0;
// 	background: #000;
// }

// .transform-rotate {
// 	position: fixed;
// 	top: 0;
// 	bottom: 0;
// 	transform-origin: 0 50%;
// 	transform: rotate(90deg) translate(-50%, -4%);
// }
</style>